<template>
  <el-container>
    <el-main>
      <el-button v-if="btnPermission.addRoleInfo" type="primary" round @click="addRole">添加角色</el-button>
      <el-button v-if="btnPermission.getRoleInfo" type="success" icon="el-icon-refresh" circle @click="refresh" />
      <el-table
        v-loading="loading"
        :data="tableData"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        style="width: 90%"
      >
        <el-table-column
          v-if="false"
          fixed
          prop="id"
          label="id"
        />
        <el-table-column
          prop="roleName"
          label="角色名称"
        />
        <el-table-column
          prop="roleCode"
          label="角色编码"
        />
        <el-table-column
          prop="remarks"
          label="备注"
          width="220"
        />
        <el-table-column
          prop="updateTime"
          label="修改时间"
        />
        <el-table-column
          prop="updateUser"
          label="修改者"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
        />
        <el-table-column
          prop="createUser"
          label="创建者"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="250px"
        >
          <template slot-scope="scope">
            <el-button
              v-if="btnPermission.updateRoleInfo"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              v-if="btnPermission.updateRoleMenuInfo"
              size="mini"
              type="primary"
              @click="roleEdit(scope.$index, scope.row)"
            >权限分配</el-button>
            <el-button
              v-if="btnPermission.deleteRoleInfo"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="角色编辑" :visible.sync="roleEditDialogVisible" width="20%" center :close-on-click-modal="false">
        <el-form :model="roleData" :label-position="labelPosition" label-width="80px">
          <el-form-item v-if="false" label="id">
            <el-input v-model="roleData.id" />
          </el-form-item>
          <el-form-item label="角色名称">
            <el-input v-model="roleData.roleName" />
          </el-form-item>
          <el-form-item label="角色编码">
            <el-input v-model="roleData.roleCode" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="roleData.remarks"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="roleEditDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="updatebtn">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog title="添加角色" :visible.sync="roleAddDialogVisible" width="20%" center :close-on-click-modal="false">
        <el-form :model="roleAddData" :label-position="labelPosition" label-width="80px">
          <el-form-item label="* 角色名称">
            <el-input v-model="roleAddData.roleName" placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="* 角色编码">
            <el-input v-model="roleAddData.roleCode" placeholder="请输入角色编码" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="roleAddData.remarks"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="roleAddDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addbtn">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-drawer
        title="角色权限管理"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="nodecollcolse"
        size="18%"
      >
        <div style="margin-top: 5px;margin-left: 20px;">
          <div>
            <el-button type="primary" round @click="btnSaveRole">保存信息</el-button>
            <el-button type="info" round @click="btnNotSaveRole">取消</el-button>
          </div>
          <br>
          <el-input
            v-model="filterText"
            placeholder="输入关键字进行过滤"
            style="width: 230px"
          />
          <div style="margin-top: 20px;margin-left: 20px;">
            当前角色：{{ isRoleName }} <br><br>
            <el-tree
              ref="tree"
              :data="data"
              show-checkbox
              :default-checked-keys="roleHaveData"
              node-key="id"
              accordion
              check-strictly
              highlight-current
              :filter-node-method="filterNode"
              :props="defaultProps"
            />
          </div>
        </div>
      </el-drawer>
    </el-main>
  </el-container>
</template>

<script>
import { getRoleInfo, updateRoleInfo, deleteRoleInfo, addRoleInfo, getRoleMenu, updateRoleMenuInfo } from '@/api/role'

export default {
  name: 'Role',
  data: function() {
    return {
      loading: true,
      filterText: '',
      drawer: false,
      direction: 'rtl',
      labelPosition: 'right',
      tableData: [],
      isRoleName: '',
      isRoleId: '',
      roleEditDialogVisible: false,
      roleAddDialogVisible: false,
      roleData: [],
      roleHaveData: [],
      roleAddData: {
        roleName: '',
        roleCode: '',
        remarks: ''
      },
      btnPermission: {
        getRoleInfo: false,
        updateRoleInfo: false,
        deleteRoleInfo: false,
        addRoleInfo: false,
        getRoleMenu: false,
        updateRoleMenuInfo: false
      },
      data: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getRoleInfo()
  },
  methods: {
    async getRoleInfo() {
      const { data } = await getRoleInfo()
      this.tableData = data.data[0]
      this.data = data.data[1]
      // 按钮权限设置
      const press = data.data[2]
      for (let s = 0; s < press.length; s++) {
        if (!this.btnPermission[press[s]]) {
          this.btnPermission[press[s]] = true
        }
      }
      this.loading = false
    },
    refresh() {
      this.loading = true
      this.getRoleInfo()
    },
    handleEdit(index, row) {
      this.roleData = row
      this.roleEditDialogVisible = true
    },
    filterNode(value, data) {
      if (!value) return true
      return data.title.indexOf(value) !== -1
    },
    updatebtn() {
      updateRoleInfo(this.roleData).then(res => {
        this.$message.success(res.data.msg)
        this.roleEditDialogVisible = false
        this.getRoleInfo()
      }).catch(() => {
        this.loading = false
      })
    },
    handleDelete(index, row) {
      this.$confirm('此操作将删除此角色，如有用户只有此角色，则该用户将变成无角色, 操作不可逆,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        deleteRoleInfo({ id: row.id }).then(res => {
          this.$message.success(res.data.msg)
          this.getRoleInfo()
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    addRole() {
      this.roleData = []
      this.roleAddDialogVisible = true
    },
    addbtn() {
      if (this.roleAddData.roleName === '' || this.roleAddData.roleCode === '') {
        this.$message.error('请填写 * 信息')
      } else {
        this.loading = true
        addRoleInfo(this.roleAddData).then(res => {
          Object.assign(this.$data.roleAddData, this.$options.data().roleAddData)
          this.$message.success(res.data.msg)
          this.getRoleInfo()
          this.loading = false
          this.roleAddDialogVisible = false
        }).catch(() => {
          this.loading = false
        })
      }
    },
    roleEdit(index, row) {
      getRoleMenu({ id: row.id }).then(res => {
        this.roleHaveData = res.data.data
        this.isRoleName = row.roleName
        this.isRoleId = row.id
        this.drawer = true
      })
    },
    btnNotSaveRole() {
      this.drawer = false
    },
    btnSaveRole() {
      updateRoleMenuInfo({ id: this.isRoleId, list: this.$refs.tree.getCheckedKeys() }).then(res => {
        this.$message.success(res.data.msg)
        this.drawer = false
      })
    },
    nodecollcolse() {
      this.$refs.tree.setCheckedKeys(['0'], false)
      this.drawer = false
    }
  }
}
</script>

<style scoped>
</style>
